<template>
	<div>
		<div class="good_top">
			<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item>全部商品</el-breadcrumb-item>
			  <el-breadcrumb-item v-if="!search">分类</el-breadcrumb-item>
			  <el-breadcrumb-item v-if="search">搜索</el-breadcrumb-item>
			  <el-breadcrumb-item v-if="search">{{search}}</el-breadcrumb-item>
			</el-breadcrumb>
			<div class="good_left">
				<span>分类</span>
				<ul>
					<li @click="goodChange(0)" :class="[ id == 0 ? 'liHover': '']">全部</li>
					<li  v-for="item in cateGory" :key = "item.category_id" @click="goodChange(item.category_id)"  :class="[ id == item.category_id ? 'liHover': '']">{{item.category_name}}</li>
				</ul>
			</div>
		</div>
		<div class="down">
			<div class="good_down"  v-for="(item,key) in productData" :key="key" :class="[(key+1)%5 == 0 ? '': 'good_margin']">
				<my-list :item="item"></my-list>
			</div>
		</div>
		<span v-if="!productData" style="margin-left: 146px;">抱歉没有找到相关的商品，请看看其他的商品</span>
		<div class="good_foot">
			<el-pagination
				@current-change="handleCurrentChange"
				background
			    layout="prev, pager, next"
				:page-size="pageSize"
			    :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import cateApi from "@/api/goods.js"
	export default{
		data(){
			return{
				cateGory:[],
				productData:[],//商品数据
				id:0,
				currentPage:1,
				total:0,
				pageSize: 15,
				search:"",//搜索条件
				categoryID:"" //首页浏览更多
			}
		},
		activated(){
			this.getCategory(),
			this.goodChange(0)
			this.search = this.$route.query.search;
			this.getProductBySearch();
			this.categoryID = this.$route.query.categoryID
			if(this.categoryID){
				this.goodChange(this.categoryID)
			}
		},
		watch:{ 
			$route(value){
			    if(value.query.search){
			        this.search = value.query.search;
			        this.getProductBySearch();
			    }else{
					this.goodChange(0)
				}
			}
		},
		methods:{
			async getCategory(){
				let {data: res} = await cateApi.getCategory();
				this.cateGory = res.category
			},
			async goodChange(id){
				this.id = id
				this.search = ""
					if(this.id == 0){
						var {data: res} = await cateApi.getAllProduct({categoryID: [], currentPage: this.currentPage, pageSize: this.pageSize});
					}else if(typeof this.id === "string"){
						var {data: res} = await cateApi.getProductByCategory({categoryID: [this.id], currentPage: this.currentPage, pageSize: this.pageSize});
					}else{
						var {data: res} = await cateApi.getProductByCategory({categoryID: this.id, currentPage: this.currentPage, pageSize: this.pageSize});
					}
					this.productData = res.Product
					this.total = res.total
					this.currentPage = 1
			},
			handleCurrentChange(val) {
			    this.currentPage = val
				if(this.search){
					this.getProductBySearch()
				}else{
					this.goodChange(this.id)
				}
			},
			async getProductBySearch(){
				if(this.search){
					let {data: res} = await cateApi.getProductBySearch({search: this.search, currentPage: this.currentPage, pageSize: 15});
					this.id = null
					this.productData = res.Product
					this.total = res.total
					this.currentPage = 1
				}
			}
		}
	}
</script>

<style>
	.good_top{
		width: 100%;
		height: 100px;
		background-color: white;
		position: absolute;
		border-bottom:solid 1px #dcdcdc;;
	}
	.el-breadcrumb{
		padding-top: 20px;
		margin-left: 146px;
		font-size: 16px;
	}
	.good_left{
		margin-left: 146px;
		display: flex;
		position: relative;
		bottom: -7px;
	}
	.good_left span{
		display: block;
		width: 45px;
		height: 40px;
		line-height: 40px;
		font-weight: bold;
	}
	.good_left li{
		display: block;
		width: 68px;
		height: 40px;
		border: solid 1px #dcdcdc;
		line-height: 40px;
		text-align: center;
		float: left;
	}
	.liHover{
		color: #00aaff;
		border-bottom: solid 1px #ffffff;
	}
	.down{
		width: 1225px;
		max-height: 1000px;
		margin: 0 auto;
		padding-top: 115px;
	}
	.good_down{
		float: left;
		margin-bottom: 20px;
	}
	.good_margin{
		margin-right: 25px;
	}
	.good_foot{
		width: 1225px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}
</style>
